<template>
  <transition name="slide">
  <div class="container">
    <mt-header fixed :title="assetInfo.name">
      <router-link :to="{name:'asset'}" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="asset-info-warp">
      <div class="asset-info">
        <div class="asset-info_text">
          <label>负责人：</label>
          <span v-text="assetInfo.respOwner">江红混</span>
        </div>
        <div class="asset-info-location">
          <i class="fa fa-map-marker"></i>
          <span v-text="assetInfo.address">苏州工业园区金鸡湖大道3320号</span>
        </div>
      </div>
      <div class="asset-status">
        <span class="fa-stack fa-lg fa-2x" style="color: #1aad19">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
          </span>
      </div>
    </div>
    <div id="wrapper" ref="scrollWrap">
      <div class="scroller" ref="scroller">
        <ul ref="scrollList">
          <li v-for="assetUnit in assetInfo.assetUnits">
            <asset-unit :assetUnit="assetUnit"></asset-unit>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </transition>
</template>
<script>
  import BScroll from 'better-scroll'
  import AssetUnit from './AssetUnit.vue'
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import fetch from '../../utils/fetch'
  const DEVICE_RATIO=getDeviceRatio();
  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:20*DEVICE_RATIO,
    stop:20*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-20*DEVICE_RATIO,
  }
  export default {
    data (){
      return {
        assetInfo: ''
      }
    },
    components: {
      AssetUnit
    },
    mounted(){
      const {scroller, scrollWrap, scrollList} = this.$refs;
      this.scroller = new BScroll(scrollWrap, {
        click: true,
        probeType: 3,
        pullDownRefresh: DOWN_CONFIG,
        pullUpLoad: UP_CONFIG
      });
      this.getData()
    },
    methods:{
      getData(){
        fetch('/api/asset/detail/'+ this.$route.params.assetId).then(response => {
          if (response.data.success) {
            this.assetInfo = response.data.obj
          }
        })
      }
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
     height: 100%;
    .asset-info-warp {
      height: 3.0rem;
      background: #FFF;
      top:40px;
      width: 100%;
      position: fixed;
      @include flex-left;
      .asset-info{
        flex: 1;
        padding: 20px;
        .asset-info_text{
          label{
            color: #80848f;
            @include fz(6px)
          }
          span {
            @include fz(6px);
            font-weight: 700;
          }
        }
        .asset-info-location{
          @include fz(4px);
          color: #80848f;
          line-height: 4.5;
        }
      }
      .asset-status {
        padding: 20px;
        display: inline-flex;
        vertical-align: middle;
        @include flex-center;
      }
    }
    #wrapper{
      position: fixed;
      top: 3.2rem;
      bottom: 0;
      width: 100%;
      overflow: hidden;
      background:#F0EFF5;
      z-index: 1;
      .scroller{
        position: absolute;
        width: 100%;
        &.topPadding{
          top:1rem;
        }

      }
    }
  }

</style>
